<template>
  <div>
    <div>
      <router-link to="/home">toHome</router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <router-link to="/about">toAbout</router-link>
    </div>
    <div>
      <!-- 
      keep-alive 缓存路由组件，自身不会渲染成DOM
        :include="['HomeComp']" 指定要缓存的组件
        :exclude="['HomeComp']" 指定不要缓存的组件
        :max="2"  指定最多缓存几个组件， 如果组件超出最大的缓存的值，会删除最近不常用的组件

     -->
      <keep-alive :max="2">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped></style>
